<template>
    <div class="containers container">
        <div class="container top-return">
            <div class="inline-block">
                <el-page-header @back="goBack" content="新增模板"></el-page-header>
            </div>
        </div>
        <div class="container spc">
            <el-form ref="formRef" :model="currentItem.rowData" :rules="rules" label-width="150px" class="demo-ruleForm">
                <!-- 商品信息 -->
                <div class="title head-title bottom-border">
                    商品信息
                </div>

                <el-row class="el-rows">
                    <el-col :span="12">
                        <el-form-item label="商品编号:" prop="code" style="margin-bottom: 0;">
                            <el-input placeholder="请输商品编号" v-model="currentItem.rowData.code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商品名称:" prop="name" style="margin-bottom: 0;">
                            <el-input placeholder="请输商品名称" v-model="currentItem.rowData.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="el-rows">
                    <el-col :span="12">
                        <el-form-item label="商品编号:" prop="code" style="margin-bottom: 0;">
                            <el-input placeholder="请输商品编号" v-model="currentItem.rowData.code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商品名称:" prop="name" style="margin-bottom: 0;">
                            <el-input placeholder="请输商品名称" v-model="currentItem.rowData.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="el-rows">
                    <el-col :span="12">
                        <el-form-item label="商品编号:" prop="code" style="margin-bottom: 0;">
                            <el-input placeholder="请输商品编号" v-model="currentItem.rowData.code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商品名称:" prop="name" style="margin-bottom: 0;">
                            <el-input placeholder="请输商品名称" v-model="currentItem.rowData.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="el-rows">
                    <el-col :span="12">
                        <el-form-item label="是否启用" prop="status" style="margin-bottom: 0;">
                            <el-radio-group v-model="currentItem.rowData.status">
                                <el-radio label="启用" value='1'></el-radio>
                                <el-radio label="禁用" value='0'></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 收款账户 -->
                <div class="title head-title bottom-border">收款账户</div>
                <el-row class="el-rows">
                    <el-col :span="8">
                        <el-form-item label="开户名:" prop="bankAccountName" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccountName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行账号:" prop="bankAccount" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行账号:" prop="bankAccount" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="el-rows">
                    <el-col :span="8">
                        <el-form-item label="开户名:" prop="bankAccountName" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccountName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行账号:" prop="bankAccount" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行账号:" prop="bankAccount" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="el-rows">
                    <el-col :span="8">
                        <el-form-item label="图片上传:" prop="imgs">
                            <ImageUpload v-model="currentItem.rowData.imgs" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="图片上传:" prop="imgs">
                            <ImageUpload v-model="currentItem.rowData.imgs" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="文件上传:" prop="files">
                            <FileUpload v-model="currentItem.rowData.files" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 收款账户2 -->
                <div class="title head-title bottom-border">收款账户</div>
                <el-row class="el-rows">
                    <el-col :span="6">
                        <el-form-item label="开户名:" prop="bankAccountName" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccountName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="银行账号:" prop="bankAccount" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="银行账号:" prop="bankAccount" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="银行账号:" prop="bankAccount" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="el-rows">
                    <el-col :span="6">
                        <el-form-item label="开户名:" prop="bankAccountName" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccountName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="银行账号:" prop="bankAccount" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="银行账号:" prop="bankAccount" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="银行账号:" prop="bankAccount" style="margin-bottom: 0;">
                            <el-input v-model="currentItem.rowData.bankAccount"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="el-rows">
                    <el-col :span="6">
                        <el-form-item label="图片上传:" prop="imgs">
                            <ImageUpload v-model="currentItem.rowData.imgs" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="图片上传:" prop="imgs">
                            <ImageUpload v-model="currentItem.rowData.imgs" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="图片上传:" prop="imgs">
                            <ImageUpload v-model="currentItem.rowData.imgs" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="文件上传:" prop="files">
                            <FileUpload v-model="currentItem.rowData.files" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 投保须知 -->
                <div class="title head-title bottom-border">投保须知</div>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="投保须知" name="first">
                        <editor v-model="currentItem.rowData.noticeContent" :min-height="192" class="myQuillEditor" />
                    </el-tab-pane>
                    <el-tab-pane label="投保人声明" name="second">
                        <editor v-model="currentItem.rowData.noticeContent" :min-height="192" class="myQuillEditor" />
                    </el-tab-pane>
                    <el-tab-pane label="免责声明" name="third">
                        <editor v-model="currentItem.rowData.noticeContent" :min-height="192" class="myQuillEditor" />
                    </el-tab-pane>
                    <el-tab-pane label="特别约定" name="fourth">
                        <editor v-model="currentItem.rowData.noticeContent" :min-height="192" class="myQuillEditor" />
                    </el-tab-pane>
                </el-tabs>
                <!-- 审批流程 -->
                <div class="title head-title bottom-border">审批流程 | 横向</div>
                <HorizontalApprovalFlow :steps="steps" :current="currentStep" :styleColor="'#f5f5f5'">
                </HorizontalApprovalFlow>
                <div class="title head-title bottom-border">审批流程 | 竖向</div>
                <VerticalProcessBar :steps="steps" :current="currentStep" :styleColor="'#f5f5f5'">
                </VerticalProcessBar>
            </el-form>
        </div>
        <div class="bot-pos-submit">
            <el-button class="simple-btn" @click="goBack">关闭</el-button>
            <el-button class="standard-btn" v-if="currentType != '查看'" @click="submitForm">提交</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, toRefs, defineProps } from "vue";
import { ElMessage } from "element-plus";

const activeName = ref('first')

const handleClick = (tab: any, event: Event) => {
    console.log(tab, event)
}
const formRef = ref();
const emit = defineEmits(["changeItem"]);
interface Props {
    currentItem: any;
    currentType: string;
}
const goBack = () => {
    emit("changeItem", "0");
};
const steps = [
    {
        label: 'Step 1',
        description: '舟行数日，到得武穴，已是湖北境内。这晚到了福池口，舟子泊了船，准拟过夜，俞莲舟忽听得岸上马嘶声响，向舱外一张，只见两骑马刚好掉转马头，向镇上驰去。',
        name: '明扬',
        status: 'success',
        position: "广知技术部组员",
        time: '2024-07-24 15:27',
        stepAction: "（申请人）",
        statusName: "已同意",
        statusColor: "#16D700"
    },
    {
        label: 'Step 2',
        description: '舟行数日，到得武穴，已是湖北境内。这晚到了福池口，舟子泊了船，准拟过夜，俞莲舟忽听得岸上马嘶声响，向舱外一张，只见两骑马刚好掉转马头，向镇上驰去。',
        name: '悟空',
        status: 'waring',
        position: "广知技术部主管",
        time: '2024-07-24 15:27',
        stepAction: "（审批人）",
        statusName: "已拒绝",
        statusColor: "#EF2222"
    },
    {
        label: 'Step 3',
        description: '舟行数日，到得武穴，已是湖北境内。这晚到了福池口，舟子泊了船，准拟过夜，俞莲舟忽听得岸上马嘶声响，向舱外一张，只见两骑马刚好掉转马头，向镇上驰去。',
        name: 'admin',
        status: 'pending',
        position: "广知技术部主管",
        time: '2024-07-24 15:27',
        stepAction: "（审批人）",
        statusName: "待审批",
        statusColor: "#999999"
    },
    {
        label: 'Step 4',
        description: '舟行数日，到得武穴，已是湖北境内。这晚到了福池口，舟子泊了船，准拟过夜，俞莲舟忽听得岸上马嘶声响，向舱外一张，只见两骑马刚好掉转马头，向镇上驰去。',
        name: '俞棋辉',
        status: 'pending',
        position: "甬想主管",
        time: '2024-07-24 15:27',
        stepAction: "（审批人）",
        statusName: "待审批",
        statusColor: "#999999"
    },
    {
        label: 'Step 5',
        description: '舟行数日，到得武穴，已是湖北境内。这晚到了福池口，舟子泊了船，准拟过夜，俞莲舟忽听得岸上马嘶声响，向舱外一张，只见两骑马刚好掉转马头，向镇上驰去。',
        name: '刘飞',
        status: 'pending',
        position: "广知主管",
        time: '2024-07-24 15:27',
        stepAction: "（审批人）",
        statusName: "待审批",
        statusColor: "#999999"
    },

]
const currentStep = 1;
// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<Props>(), {
    currentItem: {
        rowData: {},
        api: null,
    },
    currentType: "",
});
//提交
const submitForm = async () => {
    formRef.value!.validate(async (valid) => {
        if (!valid) return;
        try {
            await props.currentItem.api({
                ...props.currentItem.rowData
            });
            ElMessage.success({ message: `${props.currentType}成功！` });
            goBack();
        } catch (error) {
            console.log(error);
        }
    });
};
//表单验证
const rules = reactive({
    employeeNo: [{ required: true, message: "请输入工号", trigger: "blur" }],
    employeeName: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],

});
</script>
<style lang="scss" scoped>
.bot-pos-submit {
    position: fixed;
    height: 60px;
    background: white;
    width: calc(100vw - 252px);
    bottom: 0px;
    text-align: center;
    line-height: 60px;
    z-index: 999;
}
</style>